<template>
	<div class="cart">
		<el-row justify="space-between">
			<el-col>
				<span>我的购物车清单</span>
			</el-col>
		</el-row>
		<div class="cart-bottom"></div>
		<!-- 数据 -->
		<el-table
			border
			:row-key="(row)=>{ return row.cart.bookid}"
		    ref="multipleTable"
		    :data="cartlist"
		    style="width: 100%"
			highlight-current-row
		    @selection-change="totalPrice"
			height="560"
		  >
		    <el-table-column type="selection" width="100" :reserve-selection="true" />
		    <el-table-column label="图片" >
		      <template #default="scope" show-overflow-tooltip>
				<img :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`" >
			  </template>
		    </el-table-column>
		    <el-table-column  label="商品名称" show-overflow-tooltip>
				<template #default="scope">
					{{scope.row.book.name}}
				  </template>
			</el-table-column>
		    <el-table-column label="商品价钱">
				<template #default="scope">
					{{scope.row.book.price}}
				  </template>
			</el-table-column>
			<el-table-column  label="商品数量">
				<template #default="scope">
					 <el-input-number v-model="scope.row.cart.num" :min="1" @change="getNum()" />
				  </template>
			</el-table-column>
			<el-table-column property="name" label="商品总价" >
				<template #default="scope">
					{{scope.row.cart.num*scope.row.book.price}}
				  </template>
			</el-table-column>
			<el-table-column label="编号" width="120">
				<template #default="scope">
					{{scope.row.cart.bookid}}
				  </template>
			</el-table-column>
		  </el-table>
		  <div class="menoys">
			  <label>总价钱：</label><span>{{this.TotalPrice}}</span>
		  </div>
		  <div style="margin-top: 20px">
		    <el-button @click="getOrder()" type="warning">去下单</el-button>
		  </div>
	</div>
</template>

<script>
	import { ElMessage } from 'element-plus'
	import {mapState} from 'vuex';
	export default{
		name:'Cart',
		data(){
			return{
				cartlist:[],
				new_cartlist:[],//选中的数据
				TotalPrice:0,//总价
			}
		},
		created() {
			this.axios.get('/api/fore/cart/findAll').then((res)=>{
				this.cartlist = res.data.data
			}).catch((error)=>{
				// console.log(error);
			})
		},
		computed:{
			...mapState(['new_role'])
		},
		methods:{
			// 当前选中商品的总价
			totalPrice(arr) {
				this.new_cartlist = arr
				this.TotalPrice=0
				for(let temp of arr){
					this.TotalPrice+=temp.book.price*temp.cart.num;
				}
			},
			// 添加商品至购物车
			getOrder(){
				if(this.cartlist.length<=0){
					ElMessage({message:"请选择需要添加的商品！",type: "error"})
				}else{
					localStorage.setItem('cartlist',JSON.stringify(this.new_cartlist))
					this.$router.push({path:'/cratorder'})
				}
			},
			// 商品改变时计算总价
			getNum(){
				this.totalPrice(this.new_cartlist)
			}
		}
	}
</script>

<style scoped>
	.cart-bottom{
		margin: 5px 0;
		margin-bottom: 10px;
		border-bottom: 2px solid #7f7f7f;
	}
	.el-col{
		font-size: 18px;
		font-weight: bold;
		line-height: 60px;
	}
	:deep(.el-table__cell img){
		width: 60px;
		height: 40px;
	}
	:deep(.el-table){
		--el-table-border: 1px solid #c7c7c7;
		--el-table-border-color: #c7c7c7;
	}
	.menoys{
		padding: 10px 0;
		border-top: 5px solid #bcc0c8;
		border-bottom: 1px solid #303133;
	}
	.menoys label{
		color: #66c3ff;
		font-size: 14px;
		padding: 3px 5px 3px 10px;
		background: rgba(236, 245, 255, 1.0);
	}
	>>> .el-input-number {
		width: 80%;
		min-width: 115px;
		margin: 0 auto;
	}
</style>
